<template>
	<view class="company-info">
		<u-sticky v-if="loandetailInfo">
			<view class="sticky">
				<view class="base-info">
					<view class="u-flex u-row-between">
						<view>贷款金额：{{loandetailInfo.customerloanEntity.amount}}万元</view>
						<view>状态： {{loandetailInfo.typeDesc}}</view>
					</view>
					<view class="u-flex u-row-between">
						<view>担保方式：{{loandetailInfo.customerloanEntity.method}}</view>
						<view>贷款利率：{{loandetailInfo.rate}}%</view>
					</view>
					<view class="u-flex u-row-between">
						<view v-if="loandetailInfo.lendingDate!=null">放款时间： {{loandetailInfo.lendingDate.split(' ')[0]}}
						</view>
						<view v-if="loandetailInfo.endDate!=null">结清时间： {{loandetailInfo.endDate.split(' ')[0]}}</view>
					</view>
					<view>产品详情：{{loandetailInfo.customerloanEntity.detail}}</view>

					<view class="u-flex margin-top-10">
						<view class="tag-item qygj">企业管家<text>{{loandetailInfo.customerloanEntity.userName}}</text>
						</view>
						<view class="tag-item khjl">客户经理<text>{{loandetailInfo.customerloanEntity.bankUserName}}</text>
						</view>
						<view class="tag-item hhr">合伙人<text>{{loandetailInfo.partnerUserRealName}}</text></view>
					</view>
				</view>
				<u-gap height="20" bg-color="#f0f2f6"></u-gap>
				<u-tabs ref="tabs" :list="list" active-color="#2979ff" inactive-color="#606266" font-size="30"
					:current="current" @change="change"></u-tabs>
			</view>
		</u-sticky>
		<view class="page-content">
			<mescroll-body v-if="current==0" ref="mescrollRef" safearea @init="mescrollInit" @down="downCallback"
				@up="upCallback">
				<u-time-line class="order">
					<u-time-line-item :nodeTop="index+1" v-for="(item,index) in dataList" :key="index">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{ item.creatorUser }}
								</view>
								<view class="u-order-desc">{{ item.followUpDesc }}
								</view>
								<JSGJImages :imagesList="item.attachmentList"></JSGJImages>
								<view class="u-order-time" style="margin-top: 20rpx;">
									操作时间：{{ item.creatorTime }}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</mescroll-body>
			<view class="list-content" v-if="current==1">
				<view class="cardBox" v-for="(item,index) in dataLoanList" :key="index">
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">企业名称：{{ item.customerName }}
							</view>

						</view>

					</view>
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">贷款金额：{{ item.amount }}万元
							</view>

						</view>
						<view class="right">
							<text class="text-blue">{{ item.typeDesc }}</text>

						</view>
					</view>
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">客户经理：{{ item.userName }}
							</view>

						</view>
						<view class="left">
							<view class="store" style="color:green">
								{{ item.parentSerialid==null?'首贷':'续贷' }}
							</view>
						</view>
					</view>

					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">贷款期限：{{ item.term }}期
							</view>

						</view>
						<view class="left">
							<view class="store">贷款利率：{{ item.rate }}%
							</view>
						</view>
					</view>
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">创建时间：{{ item.creatorTime}}
							</view>
						</view>
					</view>
					<view class="top" v-if="item.lendingDate!=null">
						<view class="left">
							<view class="store">
								{{ item.parentSerialid==null?'放贷':'续贷' }}时间：{{ item.lendingDate }}
							</view>
						</view>
					</view>
					<view class="top" v-if="item.endDate!=null">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">结请时间：{{ item.endDate }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="save-bottom" v-if="loandetailInfo.type!=4&&loandetailInfo.type!=3">
			<view class="fixed-btn save-padding">
				<u-button class="btn-box" v-if="loandetailInfo.type==0" @click="show = true"
					type="primary">上传跟进记录</u-button>
				<u-button class="btn-box" v-if="loandetailInfo.type==0" @click="onJumpUrl(1)"
					type="primary">放款</u-button>
				<u-button class="btn-box" v-if="loandetailInfo.type==1" @click="onJumpUrl(2)"
					type="warning">续贷</u-button>
				<u-button class="btn-box" v-if="loandetailInfo.type==1" @click="onJumpUrl(3)"
					type="success">结清</u-button>
				<u-button class="btn-box" v-if="loandetailInfo.type==0" @click="end()" type="error">终止</u-button>
			</view>
		</view>
		<u-popup v-model="show" mode="center" :mask="true" width="90%" height="800rpx" border-radius="20">
			<view style="margin: 40rpx 20rpx;">
				<u-form :model="formData" ref="uForm" class="uForm" label-position="top">
					<u-form-item prop="FollowUpDesc" label="跟进记录描述" label-width="auto">
						<u-input v-model="formData.FollowUpDesc" type="textarea" height="60" border="true"
							placeholder="请输入跟进记录描述" @click="show = true" />
					</u-form-item>
					<u-form-item prop="images" label="附件信息" label-width="auto">
						<JNPFUpload v-model="attendanceFileList" :value="attendanceFileList" :fileSize='2' :limit='10'
							:showLabel="false" @uploading="uploading">
						</JNPFUpload>
					</u-form-item>
				</u-form>

				<u-button type="primary" :disabled="btnDisabled" @click="submitcontent">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import config from '@/common/js/config.js'
	export default {
		components: {

		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)

		data() {
			return {
				list: [{
					name: '跟进记录'
				}, {
					name: '贷款记录'
				}],
				show: false,
				formData: {
					customerId: undefined,
					customerloanId: undefined,
					FollowUpDesc: undefined,
				},
				attendanceFileList: [],
				btnDisabled: false,
				loandetailInfo: null,
				dataList: {},
				current: 0,
				loandetailId: null,
				loanId: undefined,
				companyInfo: {},
				loanTypeData: this.$jnpf.dictionaryData('loanType'),
				dataLoanList: [],
			}
		},
		onLoad(options) {
			if (options.loandetailId) {
				this.loandetailId = options.loandetailId;
			}
			if (options.loanId) {
				this.loanId = options.loanId;
				this.init();
			}
		},
		onShow() {
			if (uni.getStorageSync("refreshPage")) {
				this.init();
				uni.removeStorageSync('refreshPage')
			}
		},
		methods: {
			uploading(flag) {
				this.btnDisabled = flag
			},
			upCallback(page) {

				let httpData = {
					currentPage: page.num,
					pageSize: page.size,
					CustomerloanId: this.loanId,
					sidx: "CreatorTime",

				}

				this.$helper.ajax({
					url: `/api/Jiushi/Customerloanfollowup`,
					method: 'GET',
					data: httpData,
					success: res => {
						console.log(res)
						let curPageLen = res.data.data.list.length;
						let totalSize = res.data.data.pagination.total;
						this.mescroll.endBySize(curPageLen, totalSize);
						if (page.num == 1) {
							this.dataList = []
						}
						let tempList = res.data.data.list.map(item => {
							if (item.attachmentInfo != null && item.attachmentInfo != "") {
								item.attachmentList = item.attachmentInfo == null ? [] : item
									.attachmentInfo.split(',')
							}
							return item
						})
						this.dataList = this.dataList.concat(tempList);
					}
				});
			},
			init() {
				this.$helper.ajax({
					url: "/api/Jiushi/Customerloandetail/" + this.loandetailId,
					method: "GET",
					contentType: "application/json",
					success: res => {

						this.loandetailInfo = res.data.data;
						this.loandetailInfo.typeDesc = this.loanTypeData.find(item => item.value == this
								.loandetailInfo.type)
							.label
						this.formData.customerId = this.loandetailInfo.customerloanEntity.customerId;
						this.formData.customerloanId = this.loandetailInfo.customerloanEntity.id;

						let httpData = {
							currentPage: 1,
							pageSize: 100,
							needId: this.loandetailInfo.customerloanEntity.customerNeedId
						}
						this.$helper.ajax({
							url: `/api/Jiushi/Customerloandetail/GetPagCuseList`,
							method: 'GET',
							data: httpData,
							success: res => {
								this.dataLoanList = res.data.data.list.map(item => {
									item.typeDesc = this.loanTypeData.find(loan => loan
											.value == item.type)
										.label
									return item
								})
							}
						});
					}
				});
			},
			submitcontent() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.formData.attachmentInfo = this.attendanceFileList.map(item => {
							return item.url
						}).join(',')
						let url = "/api/Jiushi/Customerloanfollowup";
						let method = "POST";

						this.$helper.ajax({
							url: url,
							method: method,
							contentType: "application/json",
							data: this.formData,
							success: res => {
								this.$helper.msg(res.data.msg, 'success');
								this.mescroll.resetUpScroll();
								this.show = false
								this.init();
							}
						});
					}
				})
			},

			change(index) {
				this.current = index;
			},
			onJumpUrl(type) {
				uni.navigateTo({
					url: `/pagesJiushi/demand/subpage/editloan?type=${type}&id=${this.loandetailId}`
				})
			},
			jieshu(detail) {
				let url = "​/api​/Jiushi​/Customerneed​/End​/" + this.loandetailInfo.customerloanEntity.customerNeedId;
				let method = "PUT";

				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: null,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},
			Lending(detail) {
				let url = "/api/Jiushi/Customerloandetail/Reviewer/" + this.loandetailId;
				let method = "POST";

				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: null,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},
			xudai(detail) {
				let url = "/api/Jiushi/Customerloandetail/RenewalLoan/" + this.loandetailId;
				let method = "POST";

				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: null,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},
			Jieqing(detail) {
				let url = "/api/Jiushi/Customerloandetail/EndLending/" + this.loandetailId;
				let method = "POST";

				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: null,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},
			end(detail) {
				let url = "/api/Jiushi/Customerloandetail/End/" + this.loandetailId;
				let method = "POST";

				this.$helper.ajax({
					url: url,
					method: method,
					contentType: "application/json",
					data: null,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						this.init();
					}
				});

			},

			showlorndetail(detail) {
				let url = '../subpage/loandetail?customerId=' + this.needInfo.customerId + '&recordId' + detail.id +
					'&needId=' + this.needInfo.id
				uni.navigateTo({
					url: url
				})

			},


			callGuan(phone) {

				uni.makePhoneCall({
					phoneNumber: phone,

					success() {
						let url = "/api/Jiushi/Customerneedrecord";
						let method = "POST";
						this.$helper.ajax({
							url: url,
							method: method,
							contentType: "application/json",
							data: {
								customerNeedId: this.needInfo.id,
								customerId: this.needInfo.customerId
							},
							success: res => {

								this.$helper.msg(res.data.msg, 'success');

							}
						});
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.company-info {
		.base-info {
			background-color: #fff;
			padding: 10rpx 24rpx;
			height: auto;
			color: #333;
			font-size: 28rpx;
		}
	}

	.content {
		padding: 60upx 40upx;
		font-size: 28upx;
		line-height: 48upx;
	}

	.tag-item {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		padding-left: 8rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		color: #fff;
		margin-bottom: 10rpx;

		text {
			background: #fff;
			border-radius: 0 8rpx 8rpx 0;
			margin-left: 8rpx;
			padding: 0 8rpx;
		}
	}

	.tag-item.khjl {
		background: #ea730f;
		border: 1rpx solid #ea730f;

		text {
			color: #ea730f;
		}
	}

	.tag-item.qygj {
		background: #1e91ff;
		border: 1rpx solid #1e91ff;

		text {
			color: #1e91ff;
		}
	}

	.tag-item.hhr {
		background: #24c914;
		border: 1rpx solid #24c914;

		text {
			color: #24c914;
		}
	}

	.fixed-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 20rpx;

		.btn-box {
			flex: 1;
		}
	}

	.page-content {
		background: #fff;

		.list-content {
			background: #f0f2f6;
		}

		.cardBox {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 24rpx;
			margin-bottom: 24rpx;
		}
	}
</style>


<style lang="scss" scoped>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 690rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx 0 40rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.right {
		color: $u-type-warning-dark;
	}

	.progressBox {
		width: 150rpx;
		float: right;
	}



	.need-remark {
		color: #666;
		font-size: 28rpx;
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;
	}


	image {
		width: 260rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}


	.content {
		margin-left: 10rpx;
	}

	.title {
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.type {
		margin: 6rpx 0;
		font-size: 24rpx;
		color: $u-tips-color;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.delivery-time {
		color: #0081ff;
		font-size: 24rpx;
	}


	.right {
		margin-left: 10rpx;
		text-align: right;
	}

	.decimal {
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	.number {
		color: $u-tips-color;
		font-size: 24rpx;
	}


	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
	}

	.total-price {
		font-size: 32rpx;
	}


	.bottom {
		line-height: 90rpx;
		margin-top: 20rpx;
		float: left;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.btnBox {
		width: 150rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn {
		line-height: 52rpx;
		width: 140rpx;
		border-radius: 12rpx;
		border: 2rpx solid $u-tips-color;
		font-size: 26rpx;
		text-align: center;
		color: $u-tips-color;
	}

	.evaluate {
		color: $u-type-primary;
		border-color: $u-type-primary;
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	}

	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}


	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background: #f1f1f1;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}



	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}













	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>